<template>
  <div class="app-container">
    <div class="filter-container">
      <label style="color:#909399;font-weight:500;">运单编号</label>
      <el-input
        v-model="queryParams.transportOrderId"
        placeholder="请输入运单编号"
        class="filter-item search-item"
      />
      <label style="color:#909399;font-weight:500;">运单状态</label>
      <el-select v-model="queryParams.transportOrderStatus" placeholder="请选择">
        <el-option label="新建" value="1"></el-option>
        <el-option label="已装车" value="2"></el-option>
        <el-option label="到达" value="3"></el-option>
        <el-option label="到达最终网点" value="4"></el-option>
      </el-select><br/><br/>
       <label style="color:#909399;font-weight:500;">发件人地址</label>
                  <el-select
                  @change="pdprovince"
                    v-model="queryParams.orderDTO.senderProvinceId"
                    placeholder="省"
                    style="width: 88px">
                    <el-option label="全部" value="0"></el-option>
                    <el-option v-for="(item,index) in pca.provinces" :label="item.province" :key="index" :value="item.provinceid"></el-option>
                  </el-select>
                  <el-select
                  @change="pdcities"
                    v-model="queryParams.orderDTO.senderCityId"
                    placeholder="市"
                    style="width: 88px">
                    <el-option v-for="(item,index) in pca.cities" :label="item.city" :key="index" :value="item.cityid"></el-option>
                  </el-select>
                  <el-select
                    v-model="queryParams.orderDTO.senderCountyId"
                    placeholder="县/区"
                    style="width: 88px">
                    <el-option v-for="(item,index) in pca.areas" :label="item.area" :key="index" :value="item.areaid"></el-option>
                  </el-select>
      <!--<label style="color:#909399;font-weight:500;">司机姓名</label>
      <el-input
        v-model="queryParams.name"
        placeholder="请输入司机姓名"
        class="filter-item search-item"
      />-->
      <br/><br/>
       <label style="color:#909399;font-weight:500;">发件人姓名</label>
      <el-input
        v-model="queryParams.orderDTO.senderName"
        placeholder="请输入发件人姓名"
        class="filter-item search-item"
      />
      <label style="color:#909399;font-weight:500;">发件人电话</label>
      <el-input
        v-model="queryParams.orderDTO.senderPhone"
        placeholder="请输入发件人电话"
        class="filter-item search-item"
      /><br/><br/>
       <label style="color:#909399;font-weight:500;">收件人地址</label>
      <el-select
          @change="pdprovince1"
            v-model="queryParams.orderDTO.receiverProvinceId"
            placeholder="省"
            style="width: 88px">
            <el-option label="全部" value="0"></el-option>
            <el-option v-for="(item,index) in pca1.provinces" :label="item.province" :key="index" :value="item.provinceid"></el-option>
          </el-select>
          <el-select
          @change="pdcities1"
            v-model="queryParams.orderDTO.receiverCityId"
            placeholder="市"
            style="width: 88px">
            <el-option v-for="(item,index) in pca1.cities" :label="item.city" :key="index" :value="item.cityid"></el-option>
          </el-select>
          <el-select
            v-model="queryParams.orderDTO.receiverCountyId"
            placeholder="县/区"
            style="width: 88px">
            <el-option v-for="(item,index) in pca1.areas" :label="item.area" :key="index" :value="item.areaid"></el-option>
          </el-select>
      <br/><br/>
      <label style="color:#909399;font-weight:500;">收件人姓名</label>
      <el-input
        v-model="queryParams.orderDTO.receiverName"
        placeholder="请输入收件人姓名"
        class="filter-item search-item"
      />
      <label style="color:#909399;font-weight:500;">收件人电话</label>
      <el-input
        v-model="queryParams.orderDTO.receiverPhone"
        placeholder="请输入收件人电话"
        class="filter-item search-item"
      />
      <el-button
        style="background-color: #E05635;color: #fff;border-radius: 5px;border-color: #DCDFE6;"
        @click="search"
      >{{ $t('table.search') }}</el-button>
      <el-button
        style="background-color: #fff;color: #606266;;border-radius:5px;border-color: #DCDFE6;"
        @click="reset"
      >{{ $t('table.reset') }}</el-button>

    </div>
    <el-card shadow="never" style="margin-top: 10px;">
      <el-table
        :key="tableKey"
        ref="table"
        stripe
        v-loading="loading"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :header-cell-style="{background:'#FCFBFF',border:'0'}"
        fit
        style="width: 100%;"
        @selection-change="onSelectChange"
        @sort-change="sortChange"
      >
        <el-table-column align="center" type="selection" width="40px" />
        <el-table-column
          label="序号"
          :show-overflow-tooltip="true"
          align="center"
          prop="name"
        >
          <template slot-scope="scope">
            <span>{{(currentPage-1)*pageSize+scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="运单编号"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.transportOrderId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="运单状态" align="center" width="100px">
          <template slot-scope="{row}">
            <span v-if="row.transportOrderStatus==1">新建</span>
            <span v-if="row.transportOrderStatus==2">已装车</span>
            <!--<span v-if="row.status==3">发往x转运中心</span>-->
            <span v-if="row.transportOrderStatus==3">已到达</span>
            <span v-if="row.transportOrderStatus==4">到达终端网点</span>
            <span v-if="row.transportOrderStatus==5">已签收</span>
            <span v-if="row.transportOrderStatus==6">已拒收</span>
          </template>
        </el-table-column>
        <el-table-column label="调度状态" align="center" width="150px">
          <template slot-scope="{row}">
            <span v-if="row.schedulingStatus==1">待调度</span>
            <span v-if="row.schedulingStatus==2">未匹配线路</span>
            <!--<span v-if="row.status==3">发往x转运中心</span>-->
            <span v-if="row.schedulingStatus==3">已调度</span>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" align="center" width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.orderDTO.orderId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" align="center" width="180px">
          <template slot-scope="scope">
            <span>{{ scope.row.orderDTO.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发件人姓名" align="center" width="120px">
          <template slot-scope="scope">
            <span>{{ scope.row.orderDTO.senderName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发件人电话" align="center" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.orderDTO.senderPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发件人地址" align="center" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.orderDTO.senderAddress }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收件人姓名" align="center" width="120px">
          <template slot-scope="scope">
            <span>{{ scope.row.orderDTO.receiverName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收件人电话" align="center" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.orderDTO.receiverPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收件人地址" align="center" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.orderDTO.receiverAddress }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column
          label="作业状态"
          class-name="status-col"
          width="100px"
        >
          <template slot-scope="{row}">
            <el-tag
              :type="row.status | statusFilter"
            >{{ row.status ? $t('common.status.valid') : $t('common.status.invalid') }}</el-tag>
            <span v-if="row.status==1">待提货</span>
            <span v-if="row.status==2">在途</span>
            <span v-if="row.status==3">已交付</span>
            <span v-if="row.status==4">已交付</span>
            <span v-if="row.status==5">已作废</span>
          </template>
        </el-table-column>-->

        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button  @click="info(scope.row)" type="text" size="small">查看详情</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!--<pagination
        v-show="tableData.total>0"
        :limit.sync="pagination.size"
        :page.sync="pagination.current"
        :total="Number(tableData.total)"
        @pagination="fetch"
      />-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1,5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      <transport-task-edit
        ref="edit"
        :dialog-visible="dialog.isVisible"
        :type="dialog.type"
        @close="editClose"
        @success="editSuccess"
      />
    </el-card>
  </div>
</template>

<script>
//import '@riophae/vue-treeselect/dist/vue-treeselect.css'
//import Pagination from '@/components/Pagination'
// import orderApi from "@/api/order.js";
import transportOrder from '@/api/TransportOrder.js'

export default {
  name: 'TransportTaskManage',
  components: {   },
  filters: {
    statusFilter(status) {
      const map = {
        false: 'danger',
        true: 'success'
      }
      return map[status] || 'success'
    }
  },
  data() {
    return {
      dialog: {
        isVisible: false,
        type: 'add'
      },
      tableKey: 0,
      // total: 0,
      orgList: [],
      queryParams: {
        transportOrderId:"",
        status:"",
        orderDTO:{
          receiverProvinceId:"",
          receiverCityId:"",
          receiverCountyId:"",
          senderProvinceId:"",
          senderCityId:"",
          senderCountyId:"",
          receiverName:"",
          receiverPhone:"",
          senderPhone:"",
          senderName:""
        }
      },
      sort: {},
      selection: [],
      // 以下已修改
      loading: false,
      tableData: {
        total: 0
      },
      pageSize:1,
      currentPage:1,
      pca:{
        provinces:"",
        cities:"",
        areas:""
      },
      pca1:{
        provinces:"",
        cities:"",
        areas:""
      },
      orderDTO:{
        senderProvinceId:"",
        senderCityId:"",
        senderCountyId:"",
        receiverProvinceId:"",
        receiverCityId:"",
        receiverCountyId:""
      }
    }
  },
  computed: {},
  watch: {
    $route() {
      if (this.$route.path === '/driver-job/page') {
          this.fetch()
      }
    }
  },
  mounted() {
    this.fetch();
    this.pcalistfun();
  },
  methods: {
    handleSizeChange(val) {
        this.pageSize=val;
    },
    handleCurrentChange(val) {
      this.currentPage=val;
    },

    loadListOptions({ callback }) {
      callback()
    },
    filterStatus(value, row) {
      return row.status === value
    },
    editClose() {
      this.dialog.isVisible = false
    },
    editSuccess() {
      this.search()
    },
    onSelectChange(selection) {
      this.selection = selection
    },
    search() {
      this.fetch({
        ...this.queryParams,
        ...this.sort
      })
    },
    reset() {
      this.queryParams = {
        transportOrderId:"",
        status:"",
        orderDTO:{
          receiverProvinceId:'0',
          receiverCityId:null,
          receiverCountyId:null,
          senderProvinceId:'0',
          senderCityId:null,
          senderCountyId:null,
          receiverName:"",
          receiverPhone:"",
          senderPhone:"",
          senderName:""
        }
      },
      this.sort = {}
      this.$refs.table.clearSort()
      this.$refs.table.clearFilter()
      this.search()
    },
    exportExcel() {
      this.$message({
        message: '待完善',
        type: 'warning'
      })
    },
    singleDelete(row) {
      this.$refs.table.toggleRowSelection(row, true)
      this.batchDelete()
    },
    batchDelete() {
      if (!this.selection.length) {
        this.$message({
          message: this.$t('tips.noDataSelected'),
          type: 'warning'
        })
        return
      }
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      })
        .then(() => {
          const ids = []
          this.selection.forEach(u => {
            ids.push(u.id)
          })
          this.delete(ids)
        })
        .catch(() => {
          this.clearSelections()
        })
    },
    clearSelections() {
      this.$refs.table.clearSelection()
    },
    delete(ids) {
      transportOrder.delete({ ids: ids }).then(response => {
        const res = response.data
        if (res.isSuccess) {
          this.$message({
            message: this.$t('tips.deleteSuccess'),
            type: 'success'
          })
        }
        this.search()
      })
    },
    add() {
      this.dialog.type = 'add'
      this.dialog.isVisible = true
      this.$refs.edit.setStation(false, this.orgList)
    },
    edit(row) {
      this.$refs.edit.setStation(row, this.orgList)
      this.dialog.type = 'edit'
      this.dialog.isVisible = true
    },
    fetch(params = {}) {
      this.loading = true
      //params.size = this.pagination.size
      //params.current = this.pagination.current
      console.log(params)
      transportOrder.page(params).then(response => {
          //alert(response.data)
        this.tableData = response.data
        this.loading = false
        this.tableData.total=this.tableData.length
        //this.tableData = res.data
      })
    },
    sortChange(val) {
      this.sort.field = val.prop
      this.sort.order = val.order
      this.search()
    },
     pdcities1(){
      this.queryParams.orderDTO.receiverCountyId=""
      orderApi.findareasbyid({"cityid":this.queryParams.orderDTO.receiverCityId}).then((response)=>{
        this.pca1.areas=response.data
      })
    },
    pdcities(){
      this.queryParams.orderDTO.senderCountyId=""
      orderApi.findareasbyid({"cityid":this.queryParams.orderDTO.senderCityId}).then((response)=>{
        this.pca.areas=response.data
      })
    },
    pdprovince1(){
      this.queryParams.orderDTO.receiverCityId=""
      this.queryParams.orderDTO.receiverCountyId=""
      this.pca1.areas=""
      if(this.queryParams.orderDTO.receiverProvinceId==0){
        this.pca1.cities="";
        this.queryParams.orderDTO.receiverCityId=""
        this.pca1.areas=""
        this.queryParams.orderDTO.receiverCountyId=""
        return false;
      }
      orderApi.findcitiesbyid({"provinceid":this.queryParams.orderDTO.receiverProvinceId}).then((response)=>{
        this.pca1.cities=response.data
      })
    },
    /**
     * 渲染该省下的市
     */
    pdprovince(){
      this.queryParams.orderDTO.senderCityId=""
      this.queryParams.orderDTO.senderCountyId=""
      this.pca.areas=""
      if(this.queryParams.orderDTO.senderProvinceId==0){
        this.pca.cities="";
        this.queryParams.orderDTO.senderCityId=""
        this.pca.areas=""
        this.queryParams.orderDTO.senderCountyId=""
        return false;
      }
      orderApi.findcitiesbyid({"provinceid":this.queryParams.orderDTO.senderProvinceId}).then((response) => {
        this.pca.cities=response.data
      })
    },
    pcalistfun(){
      orderApi.pcalist().then((response) => {
          this.pca.provinces=response.data[0];
          this.pca1.provinces=response.data[0];
      })
    },
    info(row){
        this.$router.push({path:"/transport/transport-order/info",query:{data:row}})
      }
  }
}
</script>
<style lang="scss">
.el-table {
  border: 1px solid #f7f6f9;
}
.el-table tr,
.el-table td {
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #f7f6f9;
}
</style>
